<template>
  <div class="w">

    <!-- 标题 -->
    <div class="title-area">
      <span>
        厂商信息
      </span>
    </div>

    <!-- 主体内容显示区 -->
    <div class="content-area">

      <!-- 查询表单区 -->
      <div class="form-area">
        <Form
          name="form"
          ref="formRef"
          :labelCol="{span: 5, offset: 0}"
          @finish="formFinish"
          :initialValues="{}">

          <Row :gutter="16">
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="firmName" label="厂商名称" initialValue="">
                  <Input placeholder="请输入厂商名称" style="width: 70%" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="address" label="厂商地址" initialValue="">
                  <Input placeholder="请输入厂商地址" style="width: 70%" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="linkMan" label="联系人" initialValue="">
                  <Input placeholder="请输入联系人" style="width: 70%" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="linkPhone" label="联系电话" initialValue="">
                  <Input placeholder="请输入联系电话" style="width: 70%" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem :wrapperCol="{span: 20, offset: 5}">
                  <Button type="primary" @click="formQuery">查 询</Button>
                  <Button style="margin-left: 10px" @click="formReset">重 置</Button>
                  <Button type="link" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></Button>
                </FormItem>
              </div>
            </Col>
          </Row>  
        </Form>
      </div>

      <!-- 分割线 -->
      <Divider />

      <!-- 按钮区 -->
      <div class="button-area">
        <Button type="primary" @click="tblOptForm()">
          <Icon name="add" /> 新增
        </Button>
      </div>

      <!-- 列表区 -->
      <Table
        style="margin-top: 20px"
        :columns="tableColumns"
        :dataSource="tableData"
        :bordered="false"
        :rowKey="(record) => record.key"
        @change="handleTableChange"
        :scroll="{y: 470}"
        :pagination="{
          total: tableData.length,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSize,
          current,
        }">
        <template #render="render">
          <div v-if="render.dataIndex == 'isInCatalog'">
            <span>{{render.record.isInCatalog ? '是' : '否'}}</span>
          </div>
          <div v-else-if="render.dataIndex == 'operation'">
            <a href="#" @click="tblOptDetail(render.record)">详情</a>
            <span> | </span>
            <a href="#" @click="tblOptForm(render.record)">编辑</a>
            <span> | </span>
            <Popconfirm :title="`是否确认删除序号为 ${render.record.firmId} 的厂商信息？`" @confirm="removeFirm(render.record)">
              <a href="#">删除</a>
            </Popconfirm>
          </div>
        </template>
        <template #paginationTotal="props">
          <span>总共{{ props.total }} 条</span>
        </template>
      </Table>
    </div>

  </div>
</template>

<script>
import { Message } from '@uni/vue';
import { listFirm, delFirm } from "@/api/doapp/firm";

export default {
  name: "app",
  data: function () {
    return {
      tableColumns: [
        {"title":"序号", "dataIndex":"firmId", "key":"firmId", width: 60},
        {"title":"厂商名称", "dataIndex":"firmName", "key":"firmName"},
        {"title":"厂商地址", "dataIndex":"address", "key":"address", "width":200},
        {"title":"联系人", "dataIndex":"linkMan", "key":"linkMan"},
        {"title":"联系电话", "dataIndex":"linkPhone", "key":"linkPhone"},
        {"title":"是否信创在目录", "dataIndex":"isInCatalog", "key":"isInCatalog"},
        {"title":"入库时间", "dataIndex":"updateTime", "key":"updateTime", "width":200},
        {"title":"操作", "dataIndex":"operation", "key":"operation", "width":140,
          // render: (text, record, index) => {
          //   return this.$createElement('span', {}, [
          //     this.$createElement('a', { on: { click: () => this.tblOptEdit(record) } }, '编辑'),
          //     this.$createElement('span', { style: "color: #D8D8D8;" }, ' | '),
          //     this.$createElement('a', { on: { click: () => this.tblOptRemove(record) } }, '删除')
          //   ])
          // }
        }
      ],
      tableData: [
        // { "id":"1",  "name":"达梦",     "address":"武汉东湖", "contact":"冯裕才", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        // { "id":"2",  "name":"金仓",     "address":"北京朝阳", "contact":"杜胜", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        // { "id":"3",  "name":"神舟通用", "address":"天津滨海", "contact":"何清法", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        // { "id":"4",  "name":"南大通用", "address":"天津华苑产业区", "contact":"丁明峰", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        // { "id":"5",  "name":"瀚高",     "address":"山东济南", "contact":"苗健", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        // { "id":"6",  "name":"万里开源", "address":"北京丰台", "contact":"郑红云", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        // { "id":"7",  "name":"易鲸捷",   "address":"上海自由贸易试验区", "contact":"李静", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        // { "id":"8",  "name":"优炫",     "address":"北京海淀", "contact":"梁继良", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        // { "id":"9",  "name":"海量数据", "address":"北京海淀", "contact":"闫忠文", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
        // { "id":"10", "name":"云和恩墨", "address":"北京东城", "contact":"盖国强", "tel":18889898989, "existCatalog":"是", "storeTime":"2017-10-31 12:13:00", "operation":"编辑 | 删除" },
      ],
      current: 1,
      pageSize: 5,
    }
  },
  mounted: function () {
    this.formFinish();
  },
  methods: {
    formQuery: function () {
      this.$refs.formRef.submit();
    },
    formReset: function () {
      this.$refs.formRef.reset();
    },
    formFinish: async function (formValues) {
      const rs = await listFirm(formValues);
      if (rs.code !== 200) return Message.error({ text: '获取厂商列表信息失败：' + rs.msg });
      this.tableData = rs.rows;
    },
    handleTableChange: function (p, filters) {
      const { current, pageSize } = p;
      this.current = current;
      this.pageSize = pageSize;
      console.log('filters', p, filters);
    },
    tblOptDetail: function (record) {
      this.$router.push({
        path: '/manufacturerInfoDetails',
        query: { record: record }
      });
    },
    tblOptForm: function (record) {
      this.$router.push({
        path: '/manufacturerInfoForm',
        query: { record: record }
      });
    },
    removeFirm: async function (record) {
      const rs = await delFirm(record.firmId);
      if (rs.code !== 200) return Message.error({ text: '删除厂商失败：' + rs.msg });

      Message.success({ text: '删除厂商信息完成' });
      this.formQuery();
    }
  }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }

  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

